<template>
	<view class="contractDetail">
		<!-- 房间轮播图 -->
		<view class="top_image">
			<swiper :circular="true" :autoplay="false" :interval="3000">
				<swiper-item v-for="(item, index) in houseDetails.image" :key="index">
					<image mode="scaleToFill" class="image" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 房间类型+房间面积+月租金 -->
		<view class="info-item top-item">
			<text class="label label-price">{{ houseDetails.price }}</text>
			<text class="price-text"> 元/月</text>
			<text class="type">{{ houseDetails.contractType }} </text>
		</view>
		<view class="info-item">
			<view class="info-item-box">
				<view class="info-item-box-item">
					<view class="context">{{ houseDetails.nature }}</view>
					<view class="title">整租</view>
				</view>
				<view class="info-item-box-item">
					<view class="context">{{ houseDetails.floor }}</view>
					<view class="title">楼层</view>
				</view>
				<view class="info-item-box-item">
					<view class="context">{{ houseDetails.usageArea }}</view>
					<view class="title">面积</view>
				</view>
				<view class="info-item-box-item item-time">
					<view class="context">{{ houseDetails.lastCleanDate }}</view>
					<view class="title">上次打扫</view>
				</view>
			</view>
		</view>
		<!-- 房间地址+地图 -->
		<view class="room-location">
			<view class="location-info">
				<text class="context">{{ houseDetails.address }} · {{ houseDetails.name }}</text>

				<view class="ditu">
					<map style="width:100%;height:100%;" :latitude="houseDetails.location.latitude"
						:longitude="houseDetails.location.longitude" :scale="scale" :markers="marker">
						<!-- :markers="marker" @markertap="toMap()" -->
						<!--此处踩坑问题1：
							@markertap 是点击地图上的标记点时 触发打开地图。
							@tap 是点击地图整体的时候 触发打开地图。
							-->
					</map>

				</view>
			</view>
		</view>
		<view class="facilities-section">
			<h2>房间设施</h2>
			<view v-if="houseDetails.roomFacility.length > 0" class="facilities-container">
				<view v-for="(item, index) in houseDetails.roomFacility" :key="index" class="facility-item">
					<view :class="getIconRoomClass(item)" class="facility-icon"></view>
					<view class="facility-label">{{ item }}</view>
				</view>
			</view>

			<h2>能源设施</h2>
			<view v-if="houseDetails.energyFacility.length > 0" class="facilities-container">
				<view v-for="(item, index) in houseDetails.energyFacility" :key="index" class="facility-item">
					<view :class="getIconEnergyClass(item)" class="facility-icon"></view>
					<view class="facility-label">{{ item }}</view>
				</view>
			</view>
		</view>

		<!-- 房间描述 -->
		<view class="room-description">
			<view>
				<text class="label">房屋介绍：</text>
			</view>
			<view>
				<text class="context">{{ houseDetails.description }}</text>
			</view>

		</view>
		<!-- 签约按钮 -->
		<view class="sign-contract">
			<view v-if="houseDetails.isCollect" @tap="delcollect()">
				已收藏
			</view>
			<view v-else @tap="collect()">
				未收藏
			</view>
			<button type="primary" round block @tap="goRouter('booking')">预约看房</button>
			<button type="primary" round block @tap="goRouter('contract')">签约房屋</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getHouseDetails } from '../../services/contract';
import { insertMyFavorites, deleteMyFavorites } from '../../services/myFavorites'

import { HouseDetails } from '/@/types/house';
import { ref } from 'vue';

const scale = ref(20); //地图缩放程度

let houseDetails = ref<HouseDetails>({})
let contractId: number = 0
const collect = async () => {
	const res = await insertMyFavorites(contractId)
	if(res.code == 200)
{
	houseDetails.value.isCollect = true
	uni.showToast({
		title: '收藏成功',
		icon: 'success',
		duration: 2000
	})
}
}

const marker = ref([{
  id: 1,
  latitude: 0,
  longitude: 0,
  iconPath: '/static/images/local-two.png',
  width: 30,
  height: 30
}]);

onLoad(async (option) => {
  if (option) {
    contractId = option.contractId;
    // await insertHistory(option.contractId);
    const res = await getHouseDetails(option.contractId);
    houseDetails.value = res.data;

    // 更新 marker 的经纬度
    marker.value[0].latitude = res.data.location.latitude;
    marker.value[0].longitude = res.data.location.longitude;

    console.log(marker.value);
  }
});
const delcollect = async () => {
	const res = await deleteMyFavorites(contractId)
	if (res.code == 200) {
		houseDetails.value.isCollect = false
		uni.showToast({
			title: '取消收藏',
			icon: 'success',
			duration: 2000
		})
	}

}

const getIconRoomClass = (facility: string) => {
	// 根据设施类型返回相应的 CSS 类
	const iconMap = {
		'床': 'icon-chuang',
		'衣柜': 'icon-yigui',
		'书桌': 'icon-shuzhuo',
		'智能门锁': 'icon-zhinengmensuo',
		'宽带': 'icon-kuandai',
		'电视机': 'icon-dianshiji',
		'微波炉': 'icon-weibolu',
		'天然气': 'icon-tianranqi',
		'电磁炉': 'icon-diancilu',
		'热水器': 'icon-reshuiqi',
		'沙发': 'icon-shafa',
		'冰箱': 'icon-bingxiang',
		'洗衣机': 'icon-xiyiji'
	};
	return iconMap[facility] || 'icon-default';
};
const getIconEnergyClass = (facility: string) => {
	// 根据设施类型返回相应的 CSS 类
	const iconMap1 = {
		'停车场': 'icon-tingchechang',
		'健身房': 'icon-jianshenfang',
		'洗衣房': 'icon-xiyifang',
		'电梯': 'icon-dianti',
		'安全监控': 'icon-anquanjiankong',
		'便利店': 'icon-bianlidian',
		'24H安保': 'icon-a-24Hanbao'
	};
	return iconMap1[facility] || 'icon-default';
};



const goRouter = (type: string) => {

	uni.navigateTo({
		url: `/pages/${type}/${type}?contractId=${contractId}&houseId=${houseDetails.value.housesId}`

	});
};
</script>

<style scoped>
.top_image {
	height: 150px;
}

.ditu {
	width: 100%;
	height: 565rpx;
}

.carousel-container {
	margin-bottom: 20px;
}

.label {
	font-size: 32rpx;
	color: #333;

}

.label-price {
	font-size: 20px;
	font-weight: 700;
	color: #34b5bb;

}

.price-text {
	font-size: 28rpx;
	color: #34b5bb;

}

.top-item {
	text-indent: 1em;
}

.type {

	font-size: 16px;
	color: #666;
}

.room-description {
	margin-bottom: 20rpx;
	text-indent: 1em;
}

.room-location {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.location-info {
	flex: 1;
	text-indent: 1em;
}

.info-item-box {
	display: flex;
	background-color: #ffffff;
	padding-left: 10px;
	margin: auto;
	width: calc(100% - 20px);
	border-radius: 5px;

}

.info-item-box-item {
	text-align: center;
	width: 65px;
}

.item-time {
	width: 120px;
}

.title {
	font-size: 12px;
	color: #aaaaaa;
}

.context {
	font-size: 13px;
	color: #333333;
	font-weight: 700;
}


.sign-contract {
	margin-top: 40rpx;
	display: flex;
}

button {
	width: 120px;
}

.facilities-section {
	font-family: Arial, sans-serif;
	padding: 20px;
}

h2 {
	font-size: 1.5em;
	margin-bottom: 15px;
	color: #333;
}

.facilities-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.facility-item {
	align-items: center;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	padding: 1px;
}

.facility-icon {

	font-size: 18px;
	text-align: center;
	width: 40px;
}

.facility-label {
	font-size: 13px;
	color: #555;
	text-align: center;
}
</style>